

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>项目列表</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="__PUBLIC__/style/admin.css" media="all">
  <style>
    
  </style>
</head>
<body>  
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">项目列表</div>
          <div class="layui-card-body">
            <div class="test-table-reload-btn" style="margin-bottom: 10px;">
              <div class="layui-form">
                <div class="layui-inline">
                  <input class="layui-input" name="keyword" autocomplete="off" placeholder="搜索项目名称">
                </div>
                <button class="layui-btn" lay-submit lay-filter="search-submit">搜索</button>
                <button class="layui-btn layui-bg-red" id="add-project-btn">新建项目</button>
              </div>
            </div>
            <table class="layui-hide" id="project-table"></table>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <script src="__PUBLIC__/layui/layui.js"></script>
  <script type="text/html" id="templateTpl">
      <button class="llayui-btn layui-btn-primary layui-border-green layui-btn-xs">{{ d.template}}</button>
  </script>
  <script type="text/html" id="payloadTpl">
    {{# layui.each(d.payload, function(index, item){     }}
      <button class="llayui-btn layui-btn-primary layui-border-green layui-btn-xs">{{ item}}</button>
    {{# });  }}
  </script>

  <script type="text/html" id="smsTpl">
    {{# if(d.sms == 1) { }}
    <input type="checkbox" name="open" lay-skin="switch" lay-filter="switchSms" lay-data="{{d.id}}" title="开|关" checked>
    {{# } else { }}
    <input type="checkbox" name="open" lay-skin="switch" lay-filter="switchSms" lay-data="{{d.id}}" title="开|关">
    {{# } }}
  </script>

  <script type="text/html" id="actionTpl">
    <button type="button" class="layui-btn layui-btn-xs" onclick="data_project('{{d.id}}')">内容</button>
    <button type="button" class="layui-btn layui-bg-red layui-btn-xs" onclick="del_project('{{d.id}}')">删除</button>
  </script>

  <script>
  var currPage = 1;
  layui.config({
    base: '__PUBLIC__/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'table', 'form','util'], function(){
    var table = layui.table,form = layui.form,$ = layui.$,util = layui.util;
  
    //动态加载项目表
    table.render({
      elem: '#project-table'
      ,url: "{:U('Ajax/ajax_project_list')}"
      ,limit: 20
      ,page: true
      ,cols: [[
        {field:'id', width:80, title: 'ID'}
        ,{field:'name', width:200, title: '项目名'}
        ,{field:'desc',  title: '项目描述'}
        ,{field:'username', width:100, title: '创建者'}
        ,{field:'template',  width:100,  title: '使用模板', templet: '#templateTpl'}
        ,{field:'payload',  width:140,  title: '使用载荷', templet: '#payloadTpl'}
        ,{field:'sms',  width:100, title: '短信通知', templet: '#smsTpl'}
        ,{field:'time', width:120, title: '创建时间', templet: 
              function(d){ return util.toDateString(d.time*1000, 'yyyy-MM-dd');}
        }
        ,{field: '', title: '操作', width: 130, templet: '#actionTpl'}
      ]]
      ,cellExpandedMode:'tips'
      ,done: function(res, curr, count){
        currPage = curr;
      }
    });

    // 搜索项目
    form.on('submit(search-submit)', function(obj){
      console.log(obj.field);
      var tableIns = table.render({
        elem: '#project-table'
        ,limit: 20
        ,url: "{:U('Ajax/ajax_project_list')}"
        ,where: obj.field
        ,page: true
        ,cols: [[
          {field:'id', width:80, title: 'ID'}
          ,{field:'name', width:180, title: '项目名'}
          ,{field:'desc',  title: '项目描述'}
          ,{field:'username',  title: '创建者'}
          ,{field:'template',  width:100,  title: '使用模板', templet: '#templateTpl'}
          ,{field:'payload',  width:140,  title: '使用载荷', templet: '#payloadTpl'} 
          ,{field:'sms',  width:100, title: '短信通知', templet: '#smsTpl'}
          ,{field:'time', width:120, title: '创建时间', templet: 
              function(d){ return util.toDateString(d.time*1000, 'yyyy-MM-dd');}
          } 
          ,{field: '', title: '操作', width: 130, templet: '#actionTpl'}
        ]]
        //,css:'.layui-table-cell{height:auto;overflow:visible;text-overflow:inherit;white-space:normal;}'
        ,cellExpandedMode:'tips'
        ,done: function(res, curr, count){
          currPage = curr;
        }
      });
    });

    //添加项目
    $('#add-project-btn').on('click', function() {
      layer.open({
        type: 2,
        area: ['80%', '80%'],
        maxmin: true,
        title: '新建项目',
        content: "{:U('Project/project_add')}"
      });
    });
    //短信通知开关
    form.on('switch(switchSms)', function(data){
      var id=$(data.elem).attr('lay-data');
      var sms=this.checked ? 1 :0;
      $.post("{:U('Ajax/ajax_project_update')}" , JSON.stringify({"id":id,"sms":sms}) ,function(d){
        layer.msg(d.msg);
      },"json");
    });
  });
  //删除项目
  function del_project(id){
    layer.confirm('你确定要删除这个项目吗？', {
        title: '删除确认',
        btn: ['确定', '取消'] // 自定义按钮
    }, function(index, layero) {
      layui.$.post("{:U('Ajax/ajax_project_delete')}" , JSON.stringify({"id":id}) ,function(d){
        layer.msg(d.msg);
        if(d.code == 0){refreshTable();}
      },"json");
      layer.close(index);
    }, function(index, layero) {
      layer.close(index);
    });
    }
  //项目内容
  function data_project(id){
    layer.open({
      type: 2,
      area: ['90%', '90%'],
      maxmin: true,
      title: '项目内容',
      content: "{:U('Project/project_data')}?id="+id
    });
  }
    //刷新项目表
    function refreshTable(){
      layui.table.reload('project-table', {
          url: "{:U('Ajax/ajax_project_list')}",
          page: {
            curr: currPage
          }
      });
    }
  </script>
</body>
</html>